<template>
  <div id="songlist">
    <div class="g-warp">
      <div class="recommend-list song-list">全部歌单</div>
      <el-row>
        <el-col :span="6" v-for="item in playlist" :key="item.id">
          <router-link :to="{path:'detail',query : {id : item.id}}">
            <img class="image" :src="item.coverImgUrl + '?param=140y140'" />
            </br>
          </router-link>
          <router-link :to="{path:'detail',query : {id : item.id}}" class="name">{{item.name}}</router-link>
          </br>
          <span class="title">by</span>
          <span class="author">{{item.creator.nickname}}</span>
        </el-col>
      </el-row>
      <el-pagination class="pagination" layout="prev,pager,next" :page-size="100" :total="total" @current-change="pageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import api from '../../api'
export default {
  data: function () {
    return {
      total: 0,
      playlist: [],
      offset: 0
    }
  },
  mounted: function () {
    this.$store.state.admintop = "/songlist";
    //初始化列表
    this.$nextTick((res) => {
      this.getData();
    })
  },
  methods: {
    getData() {
      this.$axios.get(api.getFashion('全部', '0', '100'))
        .then((res) => {
          this.total = res.data.total;
          this.playlist = res.data.playlists;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    pageChange: function (currentPage) {
      this.offset = 100 * currentPage;
      if (this.offset > this.total) {
        this.offset = this.total
      }
      this.$axios.get(api.getFashion('全部', this.offset, '100'))
        .then((res) => {
          this.playlist = res.data.playlists;
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}

</script>

<style>
#songlist {
  width: 980px;
  display: block;
  margin: 0 auto;
}

.recommend-list {
  padding-left: 25px;
  color: #333;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

.song-list {
  background: url("/static/aei.png") no-repeat left center;
  background-size: 20px 20px;
}

.g-warp {
  padding: 40px;
}

.name {
  display: inline-block;
  font-size: 14px;
  width: 130px;
  margin-top: 10px;
  color: #000000;
  text-decoration: none;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.name:hover {
  text-decoration: underline;
}

.name:active {
  color: #000000;
}

.el-row .el-col-6 {
  display: block;
  width: 180px;
  height: 220px;
}

.title {
  color: #999999;
  font-size: 12px;
}

.author {
  display: inline-block;
  color: #666666;
  font-size: 13px;
  margin-left: 5px;
}

.pagination {
  margin-top: 25px;
  padding-bottom: 25px;
  text-align: center;
}
</style>